<template>
  <el-dialog
    :title="reviewTitle"
    :visible.sync="reviewFlag"
    width="500px"
    center
    :before-close="reviewHandleClose"
  >
    <div class="reviewContent">
      <div class="reviewContentTop">
        <div class="reviewContentTopImg">
          <span class="num">{{
            reviewData.length
              ? (
                  (reviewData.filter((item) => item.is_true).length /
                    reviewData.length) *
                  100
                ).toFixed(0) + "%"
              : "0%"
          }}</span>
          <span class="txt">正确率</span>
        </div>
        <div class="reviewContenttitle">
          本轮复习完成情况统计
        </div>
      </div>
      <div class="reviewContentBotton">
        <div class="item item1">
          <span> {{ intensiveWordList.length }}个 </span>
          <span>
            需复习
          </span>
        </div>
        <div class="item item2">
          <span> {{ reviewData.length }}个 </span>
          <span>
            已复习
          </span>
        </div>
      </div>
      <div class="reviewContentBotton">
        <div class="item item3">
          <span>
            {{ reviewData.filter((item) => !item.is_true).length }}个
          </span>
          <span>
            遗忘数
          </span>
        </div>
        <div class="item item4">
          <span>
            {{
              intensiveWordList.length -
                reviewData.length
            }}个
          </span>
          <span>
            未复习
          </span>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="reviewHandleClose">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { formatDate } from "@/utils/dateUtil";
export default {
  data() {
    return {
      reviewTitle: formatDate(new Date(), "yyyy-MM-dd") + " 复习报告",
    };
  },
  methods: {
    reviewHandleClose() {
      this.$router.push({
        name: this.toRouter.name,
        query: this.toRouter.query,
      });
    },
  },
  props: {
    toRouter:{
        type:Object,
    },
    reviewFlag: {
      default: false,
      type: Boolean,
    },
    reviewData: {
      // default:[],
      type: Array,
    },
    intensiveWordList: {
      // default:[],
      type: Array,
    },
  },
};
</script>

<style lang="scss" scoped>
.reviewContent {
  .reviewContentTop {
    display: flex;
    flex-direction: column;
    align-items: center;
    .reviewContentTopImg {
      padding-top: 40px;
      width: 256px;
      height: 216px;
      background: url(~@/assets/img/review.png);
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .num {
        font-size: 30px;
      }
      .txt {
        font-size: 16px;
      }
    }
    .reviewContenttitle {
      font-size: 18px;
      font-weight: 700;
    }
  }
  .reviewContentBotton {
    display: flex;
    justify-content: space-around;
    .item {
      margin-top: 20px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 140px;
      height: 100px;
      color: #fff;
    }
    .item1 {
      border: 1px solid #1472ff;
      background: #1472ff;
    }
    .item2 {
      border: 1px solid #f6c250;
      background: #f6c250;
    }
    .item3 {
      border: 1px solid #ee8c49;
      background: #ee8c49;
    }
    .item4 {
      border: 1px solid #ede4e4;
      background: #ede4e4;
    }
  }
}
</style>
